<template>
  <div class="banner" @mouseover="autoStop" @mouseout="autoStart">
    <ul
      class="banner-pic"
      :style="{width:bannerData.length * 100 + '%',marginLeft: -active * 100 +'%'}"
    >
      <li v-for="item in bannerData" :key="item.bannerId">
        <img :src="item.src" />
      </li>
    </ul>
    <ul class="banner-dot">
      <li
        v-for="(item, index) in bannerData"
        :key="item.bannerId"
        :class="{active:index == active}"
        @click="activeChange(index)"
      ></li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    bannerData: {
      type: Array,
      required: true
    },
    duration: {
      type: Number,
      default: 1000
    }
  },
  data() {
    return {
      active: 0,
      timer: null,
      dt:[...this.bannerData, this.bannerData[0]]
    };
  },

  methods: {
    activeChange(index) {
      this.active = index;
    },
    autoStart() {
      this.timer = setInterval(() => {
        this.active++;
        if (this.active == this.bannerData.length) {
          this.active = 0;
        }
      }, this.duration);
    },
    autoStop() {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  created() {
    this.autoStart();    
  },
};
</script>

<style lang="less" scoped>
.banner {
  position: relative;
  width: 1000px;
  // margin: 0 auto;
  overflow: hidden;
  .banner-pic {
    height: 300px;
    transition: all 0.5s;
    li {
      width: 1000px;
      height: 300px;
      float: left;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  .banner-dot {
    position: absolute;
    right: 15px;
    bottom: 15px;
    li {
      float: left;
      width: 10px;
      height: 10px;
      margin-right: 5px;
      border-radius: 50%;
      border: 2px solid #ffffff;
      cursor: pointer;
    }
  }
}
.active {
  background-color: #ffffff;
}
</style>